<template>
	<div class="index">
		<div class="tabs rowSC mb-1 ml-3">
			<a v-for="item in tabsList" :key="item.key"
				:style="{ background: inOutTabsCurrent === item.key ? '#1F6FE4' : '#1a3d83' }"
				@click="inOutTabsChange(item.key)">{{ item.name }}</a>
		</div>
		<div class="tags" v-if="props.isTag">
			<div class="rowCC item" v-for="(item, index) in inOutTabsCurrent === 1 ? tagList : tagList1" :key="index">
				<div class="tag" :style="{ background: item.color }"></div>
				<a>{{ item.name }}</a>
			</div>
		</div>
		<div ref="main1" style="width: 27.9375em; height:10em;"></div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted,
		shallowRef,
		reactive,
		computed,
		watch
	} from 'vue';
	import * as echarts from "echarts";
	import {
		getVehicleStatistics,
		getMonitor
	} from '@/api/RoadGate'
	import {
		useStore
	} from "vuex";

	const store = useStore()
	const props: any = defineProps({
		// echartData: Object,
		isTag: Boolean
	})

	const echartData = ref < any > ({
		xData: {
			one: [],
			two: []
		},
		yData: [
			'钩臂箱体运输车',
			'厨余垃圾清运车',
			'大件垃圾清运车',
			'其他垃圾驳运车',
			'厨余垃圾清运车',
			'三轮垃圾驳运车',
			'维修作业车',
			'管理工作车'
		]
	})

	const inOutTabsCurrent = ref(1)
	const inOutData = ref < any > ({})
	const tabsList = reactive < any > ([{
		name: '日统计',
		key: 1
	}, {
		name: '月统计',
		key: 2
	}])

	const main1 = ref < any > (null)
	const myChart = shallowRef()
	const tagList = reactive < any > ([{
			name: '今日进出车辆',
			color: '#ffd699'
		},
		{
			name: '昨日进出车辆',
			color: '#ff9800'
		}
	])

	const tagList1 = reactive < any > ([{
			name: '本月进出车辆',
			color: '#ffd699'
		},
		{
			name: '上月进出车辆',
			color: '#ff9800'
		}
	])

	const init = async () => {
		const res = await getVehicleStatistics({
			site: window.site
		})
		inOutData.value = res.data!.result
		inOutTabsChange(inOutTabsCurrent.value)
		// console.log('进出车辆统计', res.data.result)

		const res1 = await getMonitor({
			site: window.site
		})
		console.log('监控模式', res1.data.result)
	}

	onMounted(() => {
		myChart.value = echarts.init(main1.value)
	})

	const refresh = computed(() => store.state.refresh) // 当前故障状态
	watch(refresh, () => {
		init()
	}, {
		immediate: true
	})



	const inOutTabsChange = (e: number) => {
		if(!inOutData.value) return
		inOutTabsCurrent.value = e
		echartData.value.xData.one = inOutTabsCurrent.value === 1 ? inOutData.value!.todayList : inOutData.value!
			.monthList
		echartData.value.xData.two = inOutTabsCurrent.value === 1 ? inOutData.value!.yesterdayList : inOutData.value!
			.lastMonthList
		// myChart.value.clear()
		chartInit()
	}

	const fomatPercent = (data: any) => {
		let sum = 0;
		xAxisValue.map((item: any) => {
			sum += item;
		});
		return Math.round((data / sum) * 100) + '%';
	}

	const formatterArr = () => {
		var arr = new Array();
		xAxisValue.map((item: any, i: number) => {
			arr.push({
				coord: [item, i]
			});
		});
		return arr
	}

	const chartInit = () => {
		let colorList1 = ['#ff9800', '#76dc52', '#86afec']
		let colorList2 = ['#ffd699', '#257651', '#1c86b8']
		let colors = [
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					offset: 1,
					color: '#30dcf3'
				},
				{
					offset: 0,
					color: '#07304c'
				}
			]),
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					offset: 1,
					color: '#ffead1'
				},
				{
					offset: 0,
					color: '#3b3b4a'
				}
			])
		];
		// 绘制图表
		myChart.value.setOption({
			// backgroundColor: '#05112c',
			color: ['#30dcf3', '#e7c59c', '#ffff00', '#ffaa7f', '#00ff00', '#5555ff'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				backgroundColor: 'rgba(0,50,99,0.65)',
				borderColor: 'rgba(0,129,255,1)',
				textStyle: {
					color: '#fff',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN'
				}
			},
			// legend: {
			// 	// bottom: 4,
			// 	icon: 'rect',
			// 	top: '0%',
			// 	right: '0%',
			// 	itemWidth: 8,
			// 	itemHeight: 8,
			// 	textStyle: {
			// 		fontSize: 8,
			// 		fontFamily: 'SourceHanSansCN',
			// 		color: '#fff'
			// 	},
			// 	data: [{
			// 			name: '今日进出车辆',
			// 			itemStyle: {
			// 				color: '#ffd699'
			// 			}
			// 		},
			// 		{
			// 			name: '昨日进出车辆',

			// 			itemStyle: {
			// 				color: '#ff9800'
			// 			}
			// 		}
			// 	]
			// },
			grid: {
				left: '1%',
				right: '4%',
				bottom: '0%',
				top: '10%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: echartData.value.yData,
				axisTick: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,0.3)'
					}
				},
				axisLabel: {
					textStyle: {
						color: '#fff'
					},
					formatter: function(
						value: any //X轴的内容
					) {
						var ret = ''; //拼接加\n返回的类目项
						var max = 4; //每行显示的文字字数
						var val = value.length; //X轴内容的文字字数
						var rowN = Math.ceil(val / max); //需要换的行数
						if (rowN > 1) {
							//判断 如果字数大于2就换行
							for (var i = 0; i < rowN; i++) {
								var temp = ''; //每次截取的字符串
								var start = i * max; //开始截取的位置
								var end = start + max; //结束截取的位置
								temp = value.substring(start, end) + '\n';
								ret += temp; //最终的字符串
							}
							return ret;
						} else {
							return value;
						}
						return value;
					},
					color: 'rgba(255,255,255,0.7)',
					fontSize: '0.7em',
					lineHeight: 18,
					fontFamily: 'SourceHanSansCN',
					interval: 0
				}
			}],
			yAxis: [{
				type: 'value',
				show: false,
				nameTextStyle: {
					color: 'rgba(255,255,255,0.7)',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN'
				},
				splitLine: {
					show: false,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(255,255,255,0.7)',
					}
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: 'rgba(255,255,255,0.3)'
					}
				},
				axisLabel: {
					color: 'rgba(255,255,255,0.7)',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN'
				}
			}],
			series: [{
				name: `${inOutTabsCurrent.value == 1 ? '今日' : '本月'}进出车辆`,
				type: 'bar',
				barWidth: '18em',
				// color: colors[0],
				label: {
					show: false,
					color: '#fff',
					fontWeight: 300,
					position: 'top'
				},
				data: echartData.value.xData.one,
				itemStyle: {
					normal: {
						//每个柱子的颜色即为colors数组里的每一项，如果柱子数目多于colors的长度，则柱子颜色循环使用该数组
						color: function(params: any) {
							return colorList2[0]
						},
						label: {
							show: true, //开启显示
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: '#fff',
								fontSize: '0.7em'
							},
							formatter: function(params: any) {
								// console.log('params', params)
								let str = params.data
								return str
							}
						}
					},
				},
			}, {
				name: `${inOutTabsCurrent.value == 1 ? '昨日' : '上月'}进出车辆`,
				type: 'bar',
				barWidth: '18em',
				// color: colors[1],
				label: {
					show: false,
					color: '#fff',
					fontWeight: 300,
					position: 'top'
				},
				data: echartData.value.xData.two,
				itemStyle: {
					normal: {
						color: function(params: any) {
							return colorList1[0]
						},
						label: {
							show: true, //开启显示
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: '#fff',
								fontSize: '0.7em'
							},
							formatter: function(params: any) {
								// console.log('params', params)
								let str = params.data
								return str
							}
						}
					},
				}
			}]
		})
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
	}

	.tabs {
		a {
			border-radius: 0.3em;
			padding: 0.2em 0.6em;
			margin: 0.1em 0.3em;
			font-size: 0.9em;
		}
	}

	.tags {
		position: absolute;
		top: 0;
		right: 0;

		.item {
			font-size: 0.7em;
			width: 30%;
		}

		.tag {
			width: 1em;
			height: 1em;
			border-radius: 0.3em;
			margin-right: 0.3125em;
			flex: none;
		}

		a {
			white-space: pre;
		}
	}
</style>
